<template>
    <div class="home">
        <div>
            <div class="demo-input-suffix">
                <el-input
                    placeholder="请输入文章标题"
                    v-model="addArticle.title"
                >
                </el-input>
                <el-select v-model="addArticle.type_id" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.type_id"
                        :label="item.label"
                        :value="item.type_id"
                    />
                </el-select>
                <div class="block">
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="addArticle.addTime"
                        type="date"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </div>

                <el-input
                    placeholder="请输入文章简介"
                    type="textarea"
                    v-model="addArticle.introduce"
                >
                </el-input>
            </div>
        </div>
        <div id="demo1"></div>
        <el-button class="sublime" @click="getEditorData" type="primary"
            >修改文章</el-button
        >
        <!-- <button type="button" class="btn" @click="getEditorData">获取当前内容</button> -->
        <h3>内容预览</h3>
        <textarea
            name=""
            id=""
            cols="170"
            rows="20"
            readonly
            v-model="editorData"
        ></textarea>
    </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from "wangeditor";
import { updateArticle } from "@/api/admin";
import { getArticleById } from "@/api/article";
export default {
    data() {
        return {
            editor: null,
            addArticle: {
                type_id: 0,
                title: "",
                introduce: "",
                view_count: 0,
            },
            editorData: "",
            options: [
                {
                    type_id: 2,
                    label: "技能",
                },
                {
                    type_id: 3,
                    label: "生活",
                },
                {
                    type_id: 4,
                    label: "心灵鸡汤",
                },
            ],
        };
    },
    async mounted() {
        const editor = new wangEditor(`#demo1`);
        // 配置 onchange 回调函数，将数据同步到 vue 中
        editor.config.onchange = (newHtml) => {
            this.editorData = newHtml;
        };
        // 创建编辑器
        editor.create();
        this.editor = editor;
        let data = await getArticleById(this.$route.query.id);
        this.addArticle = data[0];
        editor.txt.html(this.addArticle.content);
    },
    methods: {
        async getEditorData() {
            // 通过代码获取编辑器内容
            let data = this.editor.txt.html();
            let article = {
                title: this.addArticle.title,
                type_id: this.addArticle.type_id,
                introduce: this.addArticle.introduce,
                content: data,
                article_id: this.$route.query.id,
            };
            await updateArticle(article).then(
               this.$message({
                    message: '修改成功！',
                    type: 'success'
                })
            );
            //console.log(article);
            this.$router.push("/ruleArt");
        },
    },
    beforeDestroy() {
        // 调用销毁 API 对当前编辑器实例进行销毁
        this.editor.destroy();
        this.editor = null;
    },
};
</script>

<style lang="less">
.home {
    width: 1200px;
    margin: auto;
    position: relative;

    & .el-input__inner {
        margin: 10px 0;
    }
    .btn {
        position: absolute;
        right: 0;
        top: 0;
        padding: 5px 10px;
        cursor: pointer;
    }
    h3 {
        margin: 30px 0 15px;
    }
    .el-select {
        display: inline-block;
        width: 50%;
        z-index: 2;
    }
    .block {
        padding-left: 20px;
        display: inline-block;
        width: 47%;
    }
    #demo1 {
        z-index: 1;
        position: relative;
        top: 10px;
    }
    .sublime {
        margin-top: 30px;
        width: 80%;
        margin-left: 10%;
    }
    .el-select-dropdown__item:first-child {
        display: none !important;
    }
}
</style>